<template>

    <svg style="width:100%;height:100%" ref="scatterSvg" id="scatterSvg">
        <g>
            <circle v-for="value in trees" :key="value.name" :r="getSize(value.count)" :cx="getX(value.years)" 
            :cy="getY(value.avAge)" :style="{stroke:'#ccc',fill:getFill(value.cluster),strokeWidth:0.5,fillOpacity:0.7}"
             @click="circleClick(value.name)">
            </circle>
        </g>
    </svg>
</template>

<script>
import * as d3 from 'd3'
import * as d3Color from 'd3-scale-chromatic'
import {mapActions} from 'vuex'
export default {
    name:"ScatterPlot",
    data(){
        return {
            padding:{
                top:30,
                left:30,
                right:20,
                bottom:40
            },
            minradius:2,
            maxRadius:7,
            maxDeepth:0,
            maxCount:0,
            xScale:null,//x轴比例尺，时间跨度
            yScale:null,//y轴比例尺，平均寿命
            sScale:null,//大小比例尺，人数
            cScale:null,//颜色比例尺，代数
            width:0,
            height:0,
            avAge:0,//平均寿命
            years:0,//时间跨度
            textX:'Time Span',
            textY:'Average Age',
            textF:'Generation Count'
        }
    },
    props:['trees'],
    computed:{
        getX:function(){
            return function(years){
                return this.xScale(years);
            }
        },
        getY:function(){
            return function(avAge){
                // console.log(count)
                return this.yScale(avAge);
            }
        },
        // getFill:function(){
        //     return function(deepth){
        //         return d3Color.interpolateOranges(this.cScale(deepth));
        //     }
        // },
        getFill:function(){
            return function(cluster){
                
                if(cluster>=12||cluster<0){
                    return '#fff';
                }
                else{
                    return d3Color.schemePaired[cluster];
                }
            }
        },
        getSize:function(){
            return function(count){
                return this.sScale(count);
            }
        }
    },
    methods:{
        ...mapActions(['fetchTree']),
        drawAxis(){
            d3.selectAll('.axis').remove();
            var xAxis=d3.axisBottom().scale(this.xScale);
            var xg=d3.select("#scatterSvg").append("g").attr("class","axis").attr("transform",`translate(0,${this.height-this.padding.bottom})`);
            xAxis(xg);
            var yAxis=d3.axisLeft().scale(this.yScale);
            var yg=d3.select("#scatterSvg").append("g").attr("class","axis").attr("transform",`translate(${this.padding.left},0)`);
            yAxis(yg);
            xg.append("text")
            .attr("transform",`translate(${this.width-this.padding.right-this.textX.length-5},${this.padding.bottom/4*3})`)
            .attr("font-size",12)
            .attr("fill","#000")
            .text(this.textX)
            yg.append("text")
            .attr("transform",`translate(${this.padding.left*2},${this.padding.top/3*2})`)
            .attr("font-size",12)
            .attr("fill","#000")
            .text(this.textY)

            // //colorBar
            // var defs = d3.select("#scatterSvg").append("defs");
 
            // var linearGradient = defs.append("linearGradient")
			// 			.attr("id","linearColor")
			// 			.attr("x1","0%")
			// 			.attr("y1","0%")
			// 			.attr("x2","100%")
			// 			.attr("y2","0%");
 
            // var stop1 = linearGradient.append("stop")
			// 	.attr("offset","0%")
			// 	.style("stop-color",d3Color.interpolateOranges(0));
 
            // var stop2 = linearGradient.append("stop")
			// 	.attr("offset","100%")
            //     .style("stop-color",d3Color.interpolateOranges(1));
            
            // let flagRectWidth=100;
            // var colorRect = d3.select("#scatterSvg").append("rect")
			// 	.attr("x", this.width-flagRectWidth-this.padding.right)
			// 	.attr("y", 5)
			// 	.attr("width", flagRectWidth)
			// 	.attr("height", 20)
			// 	.style("fill","url(#" + linearGradient.attr("id") + ")");
            // //colorBar文字
            // d3.select("#scatterSvg")
            // .append("text")
            // .attr('x',this.width-flagRectWidth*2-this.padding.right-this.textF.length)
            // .attr("y",this.padding.top/3*2)
            // .attr("font-size",12)
            // .attr("fill","#000")
            // .text(this.textF)
        },
        circleClick(name){
            this.fetchTree(name);
        },
        
    },
    watch:{
        trees(){
            this.maxDeepth=d3.max(this.trees,d=>d.deepth);
            this.maxCount=d3.max(this.trees,d=>d.count);
            this.avAge=d3.max(this.trees,d=>d.avAge);
            this.years=d3.max(this.trees,d=>d.years);
            this.width=this.$refs.scatterSvg.clientWidth;
            this.height=this.$refs.scatterSvg.clientHeight;
            this.xScale=d3.scaleLinear().domain([0,this.years])
            .range([this.padding.left,this.width-this.padding.right]);
            this.yScale=d3.scaleLinear().domain([0,this.avAge])
            .range([this.height-this.padding.bottom,this.padding.top]);
            this.drawAxis();
            this.sScale=d3.scaleLinear().domain([0,this.maxCount])
            .range([this.minradius,this.maxRadius]);
            this.cScale=d3.scaleLinear().domain([0,this.maxDeepth])
            .range([0,1]);
        }
    }
}
</script>

<style scoped>

</style>